<template>
  <div
    class="c-table-fixed-footer g-flex-between-center"
    :class="[
      props.hasCollapse ? '' : 'c-table-fixed-footer--no-collapse',
      props.hasCollapse && collapsed ? 'c-table-fixed-footer--collapsed' : ''
    ]"
  >
    <div class="table-fixed-footer-left g-flex-start-center">
      <el-checkbox
        v-model="localIsCheckAll"
        :indeterminate="localIsIndeterminate"
        @change="handleCheckAllChange"
        >本页全选</el-checkbox
      >
      <el-divider direction="vertical" />
      <span class="g-font-14n3 g-mr20">已勾选{{ props.multipleSelection.length }}条</span>
      <slot></slot>
    </div>
    <div class="table-fixed-footer-right">
      <slot name="pagination"></slot>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'FixedTableFooterBar'
};
</script>
<script lang="ts" setup name="FixedTableFooterBar">
import { withDefaults, defineProps, defineEmits, computed } from 'vue';
import { store } from '@/store';

interface TableFixedFooterProps {
  isCheckAll: boolean;
  isIndeterminate: boolean;
  multipleSelection: any[];
  hasCollapse?: boolean;
}
const props = withDefaults(defineProps<TableFixedFooterProps>(), {
  hasCollapse: true
});
const emits = defineEmits(['update:isCheckAll', 'update:isIndeterminate', 'toggleCheckAll']);

// 菜单是否折叠 用于footer的宽度计算
const collapsed = computed(() => {
  return store.state.app.collapsed;
});

const localIsCheckAll = computed({
  get() {
    return props.isCheckAll;
  },
  set(val) {
    emits('update:isCheckAll', val);
  }
});
const localIsIndeterminate = computed({
  get() {
    return props.isIndeterminate;
  },
  set(val) {
    emits('update:isIndeterminate', val);
  }
});
// 全选
function handleCheckAllChange(val: boolean) {
  console.log('handleCheckAllChange', val);
  emits('toggleCheckAll', val);
}
</script>
